<template>
  <div class="page-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">帮助中心</h1>
      <p class="page-description">系统使用帮助和常见问题解答</p>
    </div>

    <!-- 搜索框 -->
    <a-card class="search-card" :bordered="false">
      <a-input-search
        v-model="searchKeyword"
        placeholder="搜索帮助内容..."
        size="large"
        @search="handleSearch"
      >
        <template #prefix>
          <icon-search />
        </template>
      </a-input-search>
    </a-card>

    <!-- 帮助内容 -->
    <a-row :gutter="24">
      <!-- 左侧分类菜单 -->
      <a-col :span="6">
        <a-card title="帮助分类" :bordered="false" class="category-card">
          <a-menu
            v-model:selected-keys="selectedCategory"
            @menu-item-click="handleCategoryClick"
          >
            <a-menu-item
              v-for="category in categories"
              :key="category.key"
            >
              <template #icon>
                <component :is="category.icon" />
              </template>
              {{ category.title }}
            </a-menu-item>
          </a-menu>
        </a-card>
      </a-col>

      <!-- 右侧内容区 -->
      <a-col :span="18">
        <a-card :bordered="false" class="content-card">
          <template #title>
            <div class="content-header">
              <icon-book />
              <span>{{ currentCategoryTitle }}</span>
            </div>
          </template>

          <!-- 问题列表 -->
          <a-collapse
            v-model:active-key="activeKeys"
            :bordered="false"
            expand-icon-position="right"
          >
            <a-collapse-item
              v-for="item in filteredQuestions"
              :key="item.id"
              :header="item.question"
            >
              <div class="answer-content" v-html="item.answer"></div>
            </a-collapse-item>
          </a-collapse>

          <!-- 空状态 -->
          <a-empty
            v-if="filteredQuestions.length === 0"
            description="暂无相关帮助内容"
          />
        </a-card>

        <!-- 联系支持 -->
        <a-card title="需要更多帮助？" :bordered="false" class="contact-card">
          <div class="contact-info">
            <a-space direction="vertical" size="large">
              <div class="contact-item">
                <icon-phone />
                <div class="contact-detail">
                  <div class="label">客服热线</div>
                  <div class="value">400-XXX-XXXX</div>
                </div>
              </div>
              <div class="contact-item">
                <icon-email />
                <div class="contact-detail">
                  <div class="label">邮箱支持</div>
                  <div class="value">support@hotel.com</div>
                </div>
              </div>
              <div class="contact-item">
                <icon-calendar />
                <div class="contact-detail">
                  <div class="label">工作时间</div>
                  <div class="value">周一至周五 9:00-18:00</div>
                </div>
              </div>
            </a-space>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  IconSearch,
  IconBook,
  IconPhone,
  IconEmail,
  IconCalendar,
  IconDashboard,
  IconHome,
  IconUser,
  IconCalendarClock,
  IconSettings,
  IconQuestionCircle
} from '@arco-design/web-vue/es/icon'

// 搜索关键词
const searchKeyword = ref('')

// 选中的分类
const selectedCategory = ref(['getting-started'])

// 展开的问题
const activeKeys = ref([])

// 分类列表
const categories = [
  {
    key: 'getting-started',
    title: '快速开始',
    icon: IconDashboard
  },
  {
    key: 'room-management',
    title: '房间管理',
    icon: IconHome
  },
  {
    key: 'guest-management',
    title: '客户管理',
    icon: IconUser
  },
  {
    key: 'reservation-management',
    title: '预订管理',
    icon: IconCalendarClock
  },
  {
    key: 'system-settings',
    title: '系统设置',
    icon: IconSettings
  },
  {
    key: 'faq',
    title: '常见问题',
    icon: IconQuestionCircle
  }
]

// 帮助问题数据
const questions = [
  // 快速开始
  {
    id: 1,
    category: 'getting-started',
    question: '如何登录系统？',
    answer: `
      <p>1. 在浏览器中打开系统网址</p>
      <p>2. 输入您的用户名和密码</p>
      <p>3. 点击"登录"按钮</p>
      <p>4. 首次登录建议修改默认密码</p>
    `
  },
  {
    id: 2,
    category: 'getting-started',
    question: '如何使用仪表盘？',
    answer: `
      <p>仪表盘展示了酒店的核心运营数据：</p>
      <ul>
        <li><strong>今日入住/退房：</strong>显示当天的入住和退房数量</li>
        <li><strong>空房数量：</strong>当前可用的房间数量</li>
        <li><strong>今日收入：</strong>当天的收入统计</li>
        <li><strong>入住趋势图：</strong>可切换查看周、月、年的入住趋势</li>
        <li><strong>房间类型分布：</strong>饼图显示各类房型的分布情况</li>
      </ul>
    `
  },
  {
    id: 3,
    category: 'getting-started',
    question: '系统界面介绍',
    answer: `
      <p>系统界面主要分为以下几个部分：</p>
      <ul>
        <li><strong>顶部导航栏：</strong>显示系统标题和用户信息</li>
        <li><strong>左侧菜单：</strong>主要功能模块导航</li>
        <li><strong>内容区域：</strong>显示当前页面的具体内容</li>
        <li><strong>操作按钮：</strong>页面右上角的功能按钮</li>
      </ul>
    `
  },

  // 房间管理
  {
    id: 11,
    category: 'room-management',
    question: '如何添加新房间？',
    answer: `
      <p>添加房间的步骤：</p>
      <ol>
        <li>进入"房间管理"页面</li>
        <li>点击右上角"添加房间"按钮</li>
        <li>填写房间信息（房间号、类型、价格等）</li>
        <li>点击"确定"保存</li>
      </ol>
      <p><strong>注意：</strong>房间号不能重复</p>
    `
  },
  {
    id: 12,
    category: 'room-management',
    question: '如何修改房间状态？',
    answer: `
      <p>修改房间状态：</p>
      <ol>
        <li>在房间列表中找到需要修改的房间</li>
        <li>点击操作列的"编辑"按钮</li>
        <li>修改房间状态（可用、已入住、维护中）</li>
        <li>点击"确定"保存修改</li>
      </ol>
    `
  },
  {
    id: 13,
    category: 'room-management',
    question: '如何删除房间？',
    answer: `
      <p>删除房间的步骤：</p>
      <ol>
        <li>在房间列表中找到要删除的房间</li>
        <li>点击操作列的"删除"按钮</li>
        <li>确认删除操作</li>
      </ol>
      <p><strong>警告：</strong>删除房间前请确保该房间没有未完成的预订</p>
    `
  },

  // 客户管理
  {
    id: 21,
    category: 'guest-management',
    question: '如何添加新客户？',
    answer: `
      <p>添加客户的步骤：</p>
      <ol>
        <li>进入"客户管理"页面</li>
        <li>点击"添加客户"按钮</li>
        <li>填写客户信息（姓名、电话、身份证号等）</li>
        <li>选择会员等级（可选）</li>
        <li>点击"确定"保存</li>
      </ol>
    `
  },
  {
    id: 22,
    category: 'guest-management',
    question: '如何查看客户历史记录？',
    answer: `
      <p>查看客户历史记录：</p>
      <ol>
        <li>在客户列表中找到目标客户</li>
        <li>点击客户姓名或"查看"按钮</li>
        <li>查看客户详细信息和入住历史</li>
      </ol>
    `
  },
  {
    id: 23,
    category: 'guest-management',
    question: '会员等级说明',
    answer: `
      <p>系统支持多级会员体系：</p>
      <ul>
        <li><strong>普通会员：</strong>默认等级</li>
        <li><strong>银卡会员：</strong>享受95折优惠</li>
        <li><strong>金卡会员：</strong>享受9折优惠</li>
        <li><strong>钻石会员：</strong>享受85折优惠</li>
      </ul>
      <p>会员等级可以在客户信息中手动设置</p>
    `
  },

  // 预订管理
  {
    id: 31,
    category: 'reservation-management',
    question: '如何创建预订？',
    answer: `
      <p>创建预订的步骤：</p>
      <ol>
        <li>进入"预订管理"页面</li>
        <li>点击"创建预订"按钮</li>
        <li>选择客户（或创建新客户）</li>
        <li>选择房间和入住/退房日期</li>
        <li>填写预订备注（可选）</li>
        <li>点击"确定"创建预订</li>
      </ol>
    `
  },
  {
    id: 32,
    category: 'reservation-management',
    question: '如何办理入住？',
    answer: `
      <p>办理入住的步骤：</p>
      <ol>
        <li>在预订列表中找到对应的预订</li>
        <li>确认预订状态为"已确认"</li>
        <li>点击"办理入住"按钮</li>
        <li>核对客户信息和房间信息</li>
        <li>收取押金（如需要）</li>
        <li>完成入住登记</li>
      </ol>
    `
  },
  {
    id: 33,
    category: 'reservation-management',
    question: '如何办理退房？',
    answer: `
      <p>办理退房的步骤：</p>
      <ol>
        <li>找到已入住的预订</li>
        <li>点击"办理退房"按钮</li>
        <li>核对房间状态</li>
        <li>计算额外费用（如有）</li>
        <li>结算费用并退还押金</li>
        <li>完成退房手续</li>
      </ol>
    `
  },
  {
    id: 34,
    category: 'reservation-management',
    question: '预订状态说明',
    answer: `
      <p>预订状态包括：</p>
      <ul>
        <li><strong>待确认：</strong>预订已创建，等待确认</li>
        <li><strong>已确认：</strong>预订已确认，等待入住</li>
        <li><strong>已入住：</strong>客户已办理入住</li>
        <li><strong>已完成：</strong>客户已退房，预订完成</li>
        <li><strong>已取消：</strong>预订已被取消</li>
      </ul>
    `
  },

  // 系统设置
  {
    id: 41,
    category: 'system-settings',
    question: '如何修改个人信息？',
    answer: `
      <p>修改个人信息：</p>
      <ol>
        <li>点击右上角的用户头像</li>
        <li>选择"个人设置"</li>
        <li>修改需要更新的信息</li>
        <li>点击"保存"确认修改</li>
      </ol>
    `
  },
  {
    id: 42,
    category: 'system-settings',
    question: '如何修改密码？',
    answer: `
      <p>修改密码的步骤：</p>
      <ol>
        <li>进入"系统设置"页面</li>
        <li>选择"安全设置"标签</li>
        <li>输入当前密码</li>
        <li>输入新密码（至少6位）</li>
        <li>确认新密码</li>
        <li>点击"修改密码"按钮</li>
      </ol>
    `
  },

  // 常见问题
  {
    id: 51,
    category: 'faq',
    question: '忘记密码怎么办？',
    answer: `
      <p>如果忘记密码，请联系系统管理员重置密码。</p>
      <p>管理员可以在"用户管理"中为您重置密码。</p>
    `
  },
  {
    id: 52,
    category: 'faq',
    question: '系统支持哪些浏览器？',
    answer: `
      <p>系统支持以下现代浏览器：</p>
      <ul>
        <li>Chrome（推荐）</li>
        <li>Firefox</li>
        <li>Safari</li>
        <li>Edge</li>
      </ul>
      <p><strong>建议：</strong>使用最新版本的浏览器以获得最佳体验</p>
    `
  },
  {
    id: 53,
    category: 'faq',
    question: '数据多久备份一次？',
    answer: `
      <p>系统会自动进行数据备份：</p>
      <ul>
        <li><strong>每日备份：</strong>每天凌晨自动备份</li>
        <li><strong>实时保存：</strong>所有操作实时保存到数据库</li>
        <li><strong>备份保留：</strong>保留最近30天的备份</li>
      </ul>
    `
  },
  {
    id: 54,
    category: 'faq',
    question: '如何导出数据报表？',
    answer: `
      <p>导出数据报表：</p>
      <ol>
        <li>进入"报表中心"页面</li>
        <li>选择需要导出的数据类型</li>
        <li>设置日期范围（如需要）</li>
        <li>点击"导出"按钮</li>
        <li>选择导出格式（CSV或Excel）</li>
        <li>下载报表文件</li>
      </ol>
    `
  }
]

// 当前分类标题
const currentCategoryTitle = computed(() => {
  const category = categories.find(c => c.key === selectedCategory.value[0])
  return category ? category.title : '帮助内容'
})

// 过滤后的问题列表
const filteredQuestions = computed(() => {
  let result = questions.filter(q => q.category === selectedCategory.value[0])
  
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(q => 
      q.question.toLowerCase().includes(keyword) ||
      q.answer.toLowerCase().includes(keyword)
    )
  }
  
  return result
})

// 处理分类切换
const handleCategoryClick = (key) => {
  selectedCategory.value = [key]
  activeKeys.value = []
}

// 处理搜索
const handleSearch = () => {
  // 搜索时展开所有结果
  activeKeys.value = filteredQuestions.value.map(q => q.id)
}
</script>

<style scoped lang="scss">
.page-container {
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
  
  .page-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-1);
    margin: 0 0 8px 0;
  }
  
  .page-description {
    color: var(--color-text-3);
    margin: 0;
  }
}

.search-card {
  margin-bottom: 24px;
}

.category-card {
  height: fit-content;
  
  :deep(.arco-card-body) {
    padding: 0;
  }
  
  :deep(.arco-menu) {
    border: none;
  }
}

.content-card {
  margin-bottom: 24px;
  min-height: 400px;
  
  .content-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
  }
  
  :deep(.arco-collapse) {
    border: none;
    
    .arco-collapse-item {
      border-bottom: 1px solid var(--color-border-2);
      
      &:last-child {
        border-bottom: none;
      }
    }
    
    .arco-collapse-item-header {
      padding: 16px 0;
      font-weight: 500;
      font-size: 15px;
      
      &:hover {
        background: var(--color-fill-2);
      }
    }
    
    .arco-collapse-item-content {
      padding: 16px 0;
    }
  }
  
  .answer-content {
    color: var(--color-text-2);
    line-height: 1.8;
    
    p {
      margin-bottom: 12px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    ul, ol {
      margin: 12px 0;
      padding-left: 24px;
      
      li {
        margin-bottom: 8px;
      }
    }
    
    strong {
      color: var(--color-text-1);
      font-weight: 600;
    }
  }
}

.contact-card {
  .contact-info {
    .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      
      .arco-icon {
        font-size: 20px;
        color: rgb(var(--primary-6));
        margin-top: 2px;
      }
      
      .contact-detail {
        flex: 1;
        
        .label {
          font-size: 14px;
          color: var(--color-text-3);
          margin-bottom: 4px;
        }
        
        .value {
          font-size: 16px;
          color: var(--color-text-1);
          font-weight: 500;
        }
      }
    }
  }
}

:deep(.arco-empty) {
  padding: 60px 0;
}
</style>

